<template>
	<z-paging ref="pagingRef" v-model="dataList" @query="queryList">
		<template #top>
			<uv-navbar title="开票记录" :placeholder="true" :titleStyle="{fontSize:'18px'}" autoBack>
				<template #right>
					<text @tap="showFilter">筛选</text>
				</template>
			</uv-navbar>
		</template>
		<!-- 列表 -->
		<view class="invoice-record-list">
			<view class="invoice-record-list-item" v-for="(item,index) in dataList" :key="index">
				<!-- 日期、统计 -->
				<xh-header :title="dayjs(item.dateTime).format('YYYY年MM月')" color="#333333" v-if="isShowHeader(item,index)"></xh-header>
				<view class="invoice-record-list-cell" @tap="showDetail(item)">
					<text>开票金额：¥{{item.amount}}</text>
					<view class="invoice-record-list-cell-center">
						<view class="invoice-record-list-cell-center-left">
							<text>状态：</text>
							<text :style="{color:statusInfo(item).color}">{{statusInfo(item).status}}</text>
						</view>
						<view class="invoice-record-list-cell-center-right">
							<text>查看详情</text>
							<xh-icon icon="icon_jiantou" color="#999999"></xh-icon>
						</view>
					</view>
					<view class="invoice-record-list-cell-time">{{dayjs(item.dateTime).format('YYYY-MM-DD')}}</view>
					<view class="line"></view>
				</view>
			</view>
		</view>
		<xh-invoice-record-filter-pop ref="filterRef" @filterResult="filterResult"></xh-invoice-record-filter-pop>
	</z-paging>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import dayjs from 'dayjs'
	import XhInvoiceRecordFilterPop from './widget/xh-invoice-record-filter-pop.vue'
	import { getInvoiceOrderList } from '@/common/api/api.js'
	
	const filterRef = ref(null)
	const pagingRef = ref(null)
	const dataList = ref([])
	const selectType = ref('-1')
	// 开票详情
	const showDetail = (item) => {
		const data = encodeURIComponent(JSON.stringify(item))
		uni.navigateTo({
			url: `/pages/my/invoice/invoice-record/invovice-record-detail/invovice-record-detail?data=${data}`
		})
	}
	// 筛选
	const showFilter = () => {
		filterRef.value.open()
	}
	// 筛选回调
	const filterResult = (res) => {
		selectType.value = res.id
		pagingRef.value.reload()
	}
	//是否显示日期组件
	const isShowHeader = (item,index)=>{
		if(index == 0) {
			return true
		}
		else{
			const preItem = dataList.value[index - 1]
			const currentMonth = dayjs(item.dateTime).format('YYYY-MM')
			const preMonth = dayjs(preItem.dateTime).format('YYYY-MM')
			if(currentMonth == preMonth || !currentMonth) {
				return false
			}
			else{
				return true
			}
		}
	}
	const statusInfo = (item)=>{
		if(item.state == '1') {
			return {
				status:'审核通过',
				color:'#11AC28'
			}
		}
		else if(item.state == '2') {
			return {
				status:'审核失败',
				color:'#FF0203'
			}
		}
		else{
			return {
				status:'审核中',
				color:'#060606'
			}
		}
	}
	// 获取列表数据
	const queryList = async (pageNo) => {
		let params = {}
		if(selectType.value != '-1') {
			params.identStatus = selectType.value
		}
		const res = await getInvoiceOrderList(params, pageNo)
		const list = res.result
		if (pageNo == 1) {
			dataList.value = []
		}
		dataList.value = [...dataList.value, ...list]
		pagingRef.value.completeByTotal(list, res.page.totalElements)
	}
</script>

<style lang="scss" scoped>
	.invoice-record-header {
		background-color: $xh-bg-color;
		display: flex;
		flex-direction: column;
		padding: 30rpx;

		.invoice-record-header-money-box {
			display: flex;
			align-items: center;
			color: $xh-color-9;
			font-size: 24rpx;
			margin-top: 16rpx;

			text:nth-child(2) {
				color: $xh-color-3;
			}
		}
	}

	.invoice-record-list-cell {
		background-color: #fff;
		padding: 30rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		font-size: 26rpx;

		.invoice-record-list-cell-center {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 12rpx 0;

			.invoice-record-list-cell-center-left {
				font-size: 24rpx;
			}

			.invoice-record-list-cell-center-right {
				font-size: 24rpx;
				color: $xh-color-9;
			}
		}

		.invoice-record-list-cell-time {
			font-size: 24rpx;
		}
	}
</style>